<template>
  <div class="page">
    <a-tabs v-model:activeKey="activeKey">
      <a-tab-pane key="1" tab="问卷类型">
        <ChoseTypeCard :typeList="typeList" @handleType="handleType" />
      </a-tab-pane>

      <template #renderTabBar="{ DefaultTabBar, ...props }">
        <component
          :is="DefaultTabBar"
          v-bind="props"
          class="tab_header"
          :style="{
            zIndex: 1,
            background: '#fff',
            textAlign: 'center',
            justifyContent: 'center',
          }"
        />
      </template>
    </a-tabs>
  </div>

  <CreateModel :title="selectType.typeName" @handleCreated="handleCreated" />
</template>
<script lang="ts">
import { DESIGNQUEST } from '@/router/route-name';
import {
  useQuestChoseModelStore,
  useQuestTypeChoseStore,
} from '@/store/create';
import { QuestType } from '@/store/create/temp/types/QuestType';
import { useDesignContentStore } from '@/store/design';
import { computed, defineComponent, ref } from 'vue';
import { useRouter } from 'vue-router';
import ChoseTypeCard from './ChoseTypeCard.vue';
import CreateModel from './CreateModel.vue';
// import './index.less';

export default defineComponent({
  components: { ChoseTypeCard, CreateModel },
  setup() {
    const typeStore = useQuestTypeChoseStore();
    const modelStore = useQuestChoseModelStore();
    // const { setTitle } = useDesignContentStore();
    const router = useRouter();

    typeStore.getCreateType();

    const typeList = computed<QuestType[]>(() => typeStore.types);

    const selectType = computed<QuestType>(() => typeStore.selectType);

    const handleType = (value: QuestType) => {
      typeStore.setSelectType(value);
      modelStore.setShown(true);
    };

    const handleCreated = (value: string) => {
      modelStore.setTitle(value);
      router.push({ name: DESIGNQUEST });
    };

    return {
      activeKey: ref('1'),
      typeList,
      handleType,
      selectType,
      handleCreated,
    };
  },
});
</script>
<style lang="less">
.tab_header {
  z-index: 1;
  background: '#fff';
  text-align: 'center';
  border-radius: 8px;

  .ant-tabs-nav-wrap {
    display: flex;
    justify-content: center;
  }
}
</style>
